<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购买页面</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tr:hover {
            background-color: #f1f1f1;
        }

        button {
            margin: 5px;
        }

        /* 新增样式，使支付按钮与分页按钮对齐 */
        .payment-button-container {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        /* 子窗口样式 */
        .sub-window {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            display: none;
        }

        .sub-window h2 {
            margin-top: 0;
        }

        .sub-window button {
            margin-top: 10px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
        }

        .form-group input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        /* 调整录入收货信息子窗口的样式 */
        #shippingInfoWindow {
            width: 400px;
            /* 增大宽度 */
        }
    </style>
</head>

<body>
<h2>购买页面</h2>
<p>这里展示一些商品信息，你可以进行购买操作。</p>
<div id="orderList"></div>
<div id="pagination">
    <button id="prevPage" disabled>上一页</button>
    <span id="pageInfo"></span>
    <button id="nextPage">下一页</button>
</div>

<!-- 录入收货信息的表单 -->
<div id="shippingInfoForm">
    <div class="form-group">
        <label for="name">收货人姓名</label>
        <input type="text" id="name" placeholder="请输入收货人姓名">
    </div>
    <div class="form-group">
        <label for="phone">电话号码</label>
        <input type="text" id="phone" placeholder="请输入您的电话号码">
    </div>
    <div class="form-group">
        <label for="address">收货地址</label>
        <input type="text" id="address" placeholder="请输入您的收货地址">
    </div>
    <div class="form-group">
        <label for="note">备注信息</label>
        <input type="text" id="note" placeholder="请输入备注信息（可选）">
    </div>
</div>

<!-- 新增提交订单按钮 -->
<button id="submitOrderButton">提交订单</button>
<div class="payment-button-container">
    <button id="payButton">支付</button>
</div>

<!-- 支付结果的子窗口 HTML 结构 -->
<div class="sub-window" id="paymentResultWindow">
    <h2 id="resultTitle"></h2>
    <p id="resultMessage"></p>
    <button id="closeWindowButton">关闭</button>
</div>

<script>
    // 获取 cookie 的函数
    function getCookie(name) {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) return parts.pop().split(';').shift();
    }

    // 从 token 中获取用户 ID 的函数
    function getUserIdFromToken(token) {
        try {
            // 模拟 Java 中的 JWT 解码逻辑
            const base64Url = token.split('.')[1];
            const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
            const jsonPayload = decodeURIComponent(atob(base64).split('').map(function (c) {
                return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
            }).join(''));
            const payload = JSON.parse(jsonPayload);
            return payload.id;
        } catch (error) {
            showSubWindow('错误', '从 Token 中获取用户 ID 失败: ' + error.message);
            console.error('从 Token 中获取用户 ID 失败:', error);
            return null;
        }
    }

    // 每页显示的数量
    const pageSize = 1;
    // 当前页码
    let currentPage = 1;
    // 总页数
    let totalPages = 1;
    // 存储订单号的数组
    let orderNumbers = [];

    // 获取订单列表的函数
    function getOrderList(pageNum) {
        const token = getCookie('jwtToken');
        if (!token) {
            showSubWindow('错误', '未找到 JWT Token');
            console.error('未找到 JWT Token');
            return;
        }
        const userId = getUserIdFromToken(token);
        if (!userId) {
            return;
        }

        $.ajax({
            url: '/orderList',
            method: 'GET',
            data: {
                userId: userId,
                pageNum: pageNum,
                pageSize: pageSize
            },
            success: function (response) {
                const orderListDiv = $('#orderList');
                orderListDiv.empty();

                let totalPrice = 0;
                // 用于计算总价格

                response.rows.forEach(function (merchantInfo) {
                    const merchantId = merchantInfo.merchantId;
                    const merchantTotalPrice = merchantInfo.totalPrice;
                    const orders = merchantInfo.orders;

                    totalPrice += merchantTotalPrice;
                    // 累加每个商家的总价格

                    const merchantDiv = $('<div></div>');
                    merchantDiv.append(`<h2>商家 ID: ${merchantId}，整体价格: ${merchantTotalPrice}</h2>`);
                    merchantDiv.append('<table><thead><tr><th>商品名称</th><th>数量</th><th>总价</th></tr></thead><tbody></tbody></table>');

                    const tableBody = merchantDiv.find('tbody');
                    orders.forEach(function (order) {
                        tableBody.append(`<tr><td>${order.product_name}</td><td>${order.quantity}</td><td>${order.total_price}</td></tr>`);
                    });

                    orderListDiv.append(merchantDiv);
                });

                // 计算总页数
                totalPages = Math.ceil(response.total / pageSize);
                // 更新分页信息
                $('#pageInfo').text(`第 ${currentPage} 页，共 ${totalPages} 页`);

                // 启用或禁用上一页和下一页按钮
                $('#prevPage').prop('disabled', currentPage === 1);
                $('#nextPage').prop('disabled', currentPage === totalPages);
            },
            error: function (error) {
                showSubWindow('错误', '获取订单列表失败: ' + error.statusText);
                console.error('获取订单列表失败:', error);
            }
        });
    }

    // 提交订单的函数
    function submitOrder() {
        const token = getCookie('jwtToken');
        const userId = getUserIdFromToken(token);
        if (!userId) {
            return;
        }

        const name = $('#name').val();
        const phone = $('#phone').val();
        const address = $('#address').val();
        const note = $('#note').val();

        if (!name ||!phone ||!address) {
            showSubWindow('错误', '收货人姓名、电话号码和收货地址是必填项，请输入完整信息。');
            return;
        }

        const orderListDiv = $('#orderList');
        const merchantInfos = [];
        orderListDiv.find('div').each(function () {
            const merchantId = $(this).find('h2').text().match(/商家 ID: (\d+)/)[1];
            const totalPrice = parseFloat($(this).find('h2').text().match(/整体价格: (\d+\.\d+|\d+)/)[1]);
            const orders = [];
            $(this).find('table tbody tr').each(function () {
                const productName = $(this).find('td:first').text();
                const quantity = parseInt($(this).find('td:nth-child(2)').text());
                const totalPrice = parseFloat($(this).find('td:last').text());
                orders.push({ product_name: productName, quantity: quantity, total_price: totalPrice });
            });
            merchantInfos.push({ merchantId: merchantId, totalPrice: totalPrice, orders: orders });
        });

        const totalPriceText = orderListDiv.find('h2').last().text();
        const totalPrice = totalPriceText.match(/整体价格: (\d+\.\d+|\d+)/)[1];

        const data = {
            userId: userId,
            merchantInfos: merchantInfos,
            totalPrice: totalPrice,
            shippingAddress: address,
            receiverPhone: phone,
            receiverName: name,
            remark: note,
            transactionStatus: '未生产',
            orderStatus: '订单未支付'
        };
        $.ajax({
            url: '/submitOrder',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function (response) {
                if (response.success) {
                    showSubWindow('成功', `订单提交成功！总金额: ${totalPrice} 元，收货信息：收货人 ${name}，电话 ${phone}，地址 ${address}，备注 ${note || '无'}`);
                    // 调用获取订单号的函数
                    getOrderNumbersForPayment(userId, currentPage, pageSize);
                } else {
                    showSubWindow('错误', `订单提交失败！错误信息: ${response.message}`);
                }
            },
            error: function (error) {
                showSubWindow('错误', '提交订单失败: ' + error.statusText);
                console.error('提交订单失败:', error);
            }
        });
    }

    // 获取订单号用于支付的函数
    function getOrderNumbersForPayment(userId, pageNum, pageSize) {
        $.ajax({
            url: '/pay',
            method: 'GET',
            data: {
                userId: userId,
                pageNum: pageNum,
                pageSize: pageSize
            },
            success: function (response) {
                console.log('获取到的订单号:', response);
                orderNumbers = response; // 存储订单号
            },
            error: function (error) {
                showSubWindow('错误', '获取订单号失败: ' + error.statusText);
                console.error('获取订单号失败:', error);
            }
        });
    }

    // 显示子窗口的函数
    function showSubWindow(title, message) {
        const subWindow = $('#paymentResultWindow');
        subWindow.find('#resultTitle').text(title);
        subWindow.find('#resultMessage').text(message);
        // if (message.includes('该订单已付款') && message.includes('TRADE_HAS_SUCCESS')) {
        //     subWindow.find('#resultMessage').append('<br><a href="purchase.html">返回购买页面</a>');
        //     let countdown = 5;
        //     const countdownElement = $('<p id="countdown"></p>');
        //     subWindow.find('#resultMessage').append(countdownElement);
        //     const intervalId = setInterval(() => {
        //         countdownElement.text(`将在 ${countdown} 秒后跳转回购买页面...`);
        //         countdown--;
        //         if (countdown < 0) {
        //             clearInterval(intervalId);
        //             window.location.href = 'purchase.html';
        //         }
        //     }, 1000);
        // } else if (title === '成功') {
        //     subWindow.find('#resultMessage').append('<br><a href="main.html">返回主页面</a>');
        //     let countdown = 5;
        //     const countdownElement = $('<p id="countdown"></p>');
        //     subWindow.find('#resultMessage').append(countdownElement);
        //     const intervalId = setInterval(() => {
        //         countdownElement.text(`将在 ${countdown} 秒后跳转回购买页面...`);
        //         countdown--;
        //         if (countdown < 0) {
        //             clearInterval(intervalId);
        //             window.location.href = 'purchase.html';
        //         }
        //     }, 1000);
        // }
        subWindow.show();
    }

    // 关闭子窗口的函数
    function closeSubWindow() {
        const subWindow = $('#paymentResultWindow');
        subWindow.hide();
    }

    // 支付函数
    function pay() {
        const token = getCookie('jwtToken');
        const userId = getUserIdFromToken(token);
        if (!userId) {
            return;
        }
        const encodedUserId = encodeURIComponent(userId);
        const url = `/alipay/payforAli?userId=${encodedUserId}`;
        console.log('构造的请求 URL:', url);
        $.ajax({
            url: url,
            method: 'POST',
            success: function (response) {
                if (response === "未找到未支付的订单！") {
                    showSubWindow('错误', response);
                } else {
                    try {
                        // 将支付表单插入到页面中并提交
                        const form = $(response);
                        $('body').append(form);
                        form.submit();
                    } catch (error) {
                        console.error('插入支付表单并提交时出错: ', error);
                        showSubWindow('错误', '插入支付表单并提交时出错: ' + error.message);
                    }
                }
            },
            error: function (error) {
                showSubWindow('错误', '支付请求失败: ' + error.statusText);
                console.error('支付请求失败:', error);
            }
        });
    }
    // 返回原页面函数
    function returnToOriginalPage() {
        // 这里可以根据实际情况重新加载原页面数据，比如重新调用获取订单列表的函数
        getOrderList(currentPage);
        // 隐藏支付结果子窗口
        closeSubWindow();
        return false;
    }
    // 获取商家订单总金额的函数
    function getTotalAmountForMerchant(merchantId) {
        const orderListDiv = $('#orderList');
        const merchantDiv = orderListDiv.find(`div:contains('商家 ID: ${merchantId}')`);
        const totalPriceText = merchantDiv.find('h2').text();
        return totalPriceText.match(/整体价格: (\d+\.\d+|\d+)/)[1];
    }

    // 初始化购买页面的函数
    function initPurchasePage() {
        // 初始化订单列表
        getOrderList(currentPage);

        // 上一页按钮点击事件
        $('#prevPage').click(function () {
            if (currentPage > 1) {
                currentPage--;
                getOrderList(currentPage);
            }
        });

        // 下一页按钮点击事件
        $('#nextPage').click(function () {
            if (currentPage < totalPages) {
                currentPage++;
                getOrderList(currentPage);
            }
        });

        // 提交订单按钮点击事件
        $('#submitOrderButton').click(submitOrder);

        // 支付按钮点击事件
        $('#payButton').click(pay);

        // 关闭支付结果子窗口按钮点击事件
        $('#closeWindowButton').click(closeSubWindow);
    }

    // 文档加载完成后初始化页面
    $(document).ready(function () {
        initPurchasePage();
    });
</script>
</body>

</html>